<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>vue</title>
  </head>
  <link rel="stylesheet" type="text/css" href="./style.css" />
  <script src="../vue-2.6.11.js"></script>

  <body>
    <!-- 模板 -->
    <div id="app">
      <h2>自定义的下拉框</h2>
      <div style="float:left;">
        <!-- 通过v-bind来动态绑定数据 -->
        <custom-select btn-value="查询" :list="list1"></custom-select>
      </div>
    </div>

    <script>
      //全局注册
      Vue.component('custom-select', {
        // 组件中的data必须是函数
        data: function() {
          return {
            selectShow: false,
            val: ''
          }
        },
        props: {
          list: {
            type: Array,
            defaul: []
          }
        },
        template: `<section class="warp">
						<div class="searchIpt clearFix">

							<div class="clearFix">
								<input type="text" class="keyWord" 
									:value="val" 
									@click="selectShow=!selectShow"
								/>
								<input type="button" :value="val">
								<span></span>
							</div>

							<custom-list v-show='selectShow' 
								v-bind:list='list'
								@receive="changeValueHandle"		
							>
							</custom-list>
						</div>
					</section>`,
        methods: {
          changeValueHandle: function(value) {
            //接收子组件传递的数据
            this.val = value
          }
        }
      })
      //子组件
      Vue.component('custom-list', {
        props: ['list'],
        // 接收跨多层级传递过来的数据
        inject: ['data'],
        template: `
        <ul class="list">
          <li v-for="item of list" @click="selectValueHandle(item)">{{ item }}</li>
        </ul>`,
        mounted() {
          console.log(this.data)
          console.log('this.$parent', this.$parent)
        },
        methods: {
          selectValueHandle: function(item) {
            //在子组件中有了交互，告诉父组件，需要改变val的值，要触发一个自定义事件,并把数据传给父组件
            this.$emit('receive', item)
          }
        }
      })

      //数据
      var data = {
        list1: ['北京', '上海', '深圳']
      }

      //vm实例
      var vm = new Vue({
        el: '#app',
        data: data,
        // 跨层级传递给子组件
        provide: {
          data: {
            name: 'gongyz',
            age: 23
          }
        },
        mounted() {
          console.log('this.$children', this.$children)
        }
      })
    </script>
  </body>
</html>
